<!-- 设置密码 -->

<template>
	<uni-nav-bar dark :fixed="true" shadow background-color="#fff" status-bar left-icon="left" title="设置密码" @clickLeft="back" />
	<view class="phone">
		<view class="item">
			<view class="name">输入密码：</view>
			<input type="password" placeholder="新密码" v-model="data.password_old">
		</view>
		<view class="item">
			<view class="name">确认密码：</view>
			<input type="password" placeholder="确认密码" v-model="data.password_new">
		</view>
		<!-- {{store.}} -->
		<view class="item">
			<view class="cancel" @click="back()">取消</view>
			<view class="save" @click="save()">保存</view>
		</view>
	</view>
	<view class="setting-button">
		<view class="logo">退出登录</view>
	</view>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { changepwd } from "@/request/api/login.js";
import { useCartStore } from '@/store/cart.js';

const store = useCartStore();

onLoad((e) => {
});

const data = reactive({
	password_old: '', // 设置密码
	password_new: '', // 二次输入
})

const back = () => {
	uni.navigateBack({
		delta: 1
	})
}

// 保存
const save = async() => {
	if (data.password_old == '') {
		uni.showToast({ title: '请输入密码', icon: 'none' });
		return
	}
	if (data.password_new == '') {
		uni.showToast({ title: '请输入确认密码', icon: 'none' });
		return
	}
	if (data.password_new !== data.password_old) {
		uni.showToast({ title: '两次密码输入不一致', icon: 'none' });
		return
	}
	
	// 修改密码
	const params = { password_old: data.password_old, password_new: data.password_new };
	const resultData = await changepwd(params);
	
	if (resultData.code == 200) {
		uni.showToast({ title: resultData.msg, icon: 'none' });
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/my/my'
			})
		}, 1000);
	}
}
</script>

<style lang="scss" scoped>
	.phone {
		padding: 0rpx 82rpx;
		box-sizing: border-box;
		.item:last-child {
			border-bottom: none;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
		}
		.item {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			position: relative;
			border-bottom: 2rpx solid #E5E4E4;
			.name {
				width: 140rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1C1919;
				line-height: 36rpx;
			}
			input {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #9E9E9E;
				line-height: 36rpx;
			}
			.text {
				flex: 1;
			}
			.btn {
				position: absolute;
				top: 20rpx;
				right: 0rpx;
				height: 56rpx;
				padding: 0rpx 18rpx;
				line-height: 56rpx;
				list-style: 62rpx;
				text-align: center;
				background: #000000;
				border-radius: 46rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
	
	.setting-button {
		position: fixed;
		width: 100%;
		bottom: 100rpx;
		margin: 0 auto;
		padding: 0rpx 56rpx;
		box-sizing: border-box;
		.logo {
			height: 92rpx;
			background: #000000;
			border-radius: 46rpx;
			line-height: 92rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
		}
	}
</style>

